<template>
  <div>
    <Table :columns="columns1" :data="data1"></Table>
    <Spin size="large" fix v-if="spinShow"></Spin>
    <br />
  </div>
</template>
<script>
import { fetchHomeTables } from "../../api/index";
export default {
  data() {
    return {
      spinShow: false,
      columns1: [
        {
          title: "Name",
          key: "name"
        },
        {
          title: "Age",
          key: "age"
        },
        {
          title: "Address",
          key: "address"
        }
      ],
      data1: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03"
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01"
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02"
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        }
      ]
    };
  },
  methods: {
    async fetchHomeTables() {
      let data = await fetchHomeTables();
    }
  },
  mounted() {
    this.spinShow = true;
    let timer = setTimeout(() => {
      this.spinShow = false;
      this.fetchHomeTables();
      clearTimeout(timer);
    }, 1000);
  }
};
</script>

<style scoped></style>
